<template>
    <div class="subpage contract-container">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :immediate-check="false"
                :finished="finished"
                finished-text="已加载全部了哦～"
                @load="onLoadMore"
                v-if="listData.length > 0"
            >
                <ul class="contract-box">
                    <li v-for="(item, index) in listData" :key="index" @click="jumpDetail(item.id, item.contractCategory)">
                        <div class="contract-top">
                            <p>{{item.contractCategory == 2 ? '供销' : '采购'}}{{item.productName}}</p>
                            <p>{{item.code}}</p>
                        </div>
                        <div class="contract-bottom">
                            <div class="contract-bottom-left" v-if="item.contractCategory == 3">
                                <p>
                                    <span>产地：{{item.productCity}}</span>
                                </p>
                                <p>
                                    <span>订货数量：{{item.quantity}}{{item.quantityUnit}}</span>
                                    <span>总重量：{{item.totalWeight}}{{item.totalWeightUnit}}</span>
                                </p>
                                <div class="contract-money">合同金额：<span class="color-primary">{{item.contractMoney}}元</span></div>
                            </div>
                            <div class="contract-bottom-left" v-else>
                                <p>
                                    <span>养殖地：{{item.originProvince}}</span>
                                    <span>牧场：{{item.productFarm}}</span>
                                </p>
                                <p>
                                    <span>养殖数量：{{item.quantity}}头</span>
                                    <span>总重量：{{item.totalWeight}}kg</span>
                                </p>
                                <div class="contract-money">合同金额：<span class="color-primary">{{item.contractMoney}}元</span></div>
                            </div>
                            <div class="contract-bottom-right">
                                <img src="../../../assets/img/contract_effect.png" alt="" v-if="item.state == 1">
                                <img src="../../../assets/img/contract_failure.png" alt="" v-else>
                            </div>
                        </div>
                    </li>
                </ul>
            </van-list>
            <div class="no-data-box" v-else>
                <img src="../../../assets/img/balance_empty.png" alt="" v-if="showNoInfo">
                <p v-if="showNoInfo">您还没有合同记录哦～</p>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import { List, PullRefresh } from 'vant';
export default {
    components: {
        [List.name]: List,
        [PullRefresh.name]: PullRefresh
    },
    data() {
        return {
            listData: [],
            pageIndex: 1,
            pageSize: 10,
            isLoading: false,
            loading: false,
            finished: false,
            showNoInfo: false,
        }
    },
    created() {
        this.getListData()
    },
    methods: {
        jumpDetail(id, contractCategory) {
            if(contractCategory == 1){
                this.$router.push({
                    name: 'purchaseAgreement',
                    query: {
                        id: id
                    }
                })
            }
            if(contractCategory == 2){
                this.$router.push({
                    name: 'supplyAgreement',
                    query: {
                        id: id
                    }
                })
            }
            if(contractCategory == 3){
                this.$router.push({
                    name: 'agaricPurchaseAgreement',
                    query: {
                        id: id
                    }
                })
            }
        },
        resetParams() {
            this.listData = [];
            this.loading = false;
            this.finished = false;
            this.pageIndex = 1;
        },
        getListData() {
            let getData = {
                pgCt: this.pageIndex,
                pgSz: this.pageSize
            }
            let url = this.pageIndex > 1 ? '/api/contract/list?noLoading' : '/api/contract/list';
            this.$api.get(url, getData)
                .then((res) => {
                    this.showNoInfo = res.data.total > 0 ? false : true;
                    this.listData = this.listData.concat(res.data.records)
                    if(this.pageIndex > 1 && res.data.records.length < this.pageSize){
                        this.finished = true;
                    }
                })
        },
        onRefresh() { //下拉刷新
            this.resetParams()
            setTimeout(() => {
                this.getListData();
                this.isLoading = false;
            }, 500);
        },
        onLoadMore() {
            // 异步更新数据
            setTimeout(() => {
                this.pageIndex++;
                this.getListData()
                // 加载状态结束
                this.loading = false;
            }, 500);
        }
    }
}
</script>

<style lang="scss" scoped>
    .contract-container {
        width: 100%;
        height: 100vh;
        padding: 3px 13px 16px;
        box-sizing: border-box;
        .contract-box {
            width: 100%;
            li {
                width: 100%;
                padding: 16px;
                box-sizing: border-box;
                margin-top: 10px;
                background-color: #fff;
                border-radius: 4px;
                overflow: hidden;
                .contract-top {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    p {
                        &:first-child {
                            font-size: 16px;
                            color: #344047;
                        }
                        &:last-child {
                            color: #5D6164;
                        }
                    }
                }
                .contract-bottom {
                    width: 100%;
                    display: flex;
                    margin-top: 14px;
                    .contract-bottom-left {
                        flex: 1;
                        p {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 12px;
                            color: #969C9E;
                            &:first-child {
                                margin-bottom: 2px;
                            }
                        }
                        .contract-money {
                            margin-top: 20px;
                            span {
                                font-weight: 500;
                            }
                        }
                    }
                    .contract-bottom-right {
                        width: 63px;
                        height: 63px;
                        margin-left: 38px;
                        img {
                            width: 63px;
                            height: 63px;
                            object-fit: cover;
                        }
                    }
                }
            }
        }

        .no-data-box {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            img{
                width: 162px;
                height: 162px;
                margin: -90px auto 14px;
            }
            p {
                color: #969C9E;
            }
        }
    }
</style>